<template>
    <div class="apiCacheContainer">
        <div class="searchContainer">
            <GatewayRedisCacheSearch />
        </div>
        <div class="insertContainer">
            <el-button type="primary" icon="RedoOutlined" @click="refreshCache()" :loading="isLoading">刷新缓存</el-button>
        </div>
        <div>
            <el-table
                :data="apiCacheDataList"
                style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
                row-key="id"
                border
                :stripe="true"
                :show-overflow-tooltip="true"
                class="tableContainer"
                max-height="70vh"
            >
                <el-table-column prop="id" label="路由编码" />
                <el-table-column prop="applicationName" label="微服务" />
                <el-table-column prop="uri" label="路由地址" />
                <el-table-column prop="predicates" label="断言" />
                <el-table-column prop="filters" label="过滤" />
            </el-table>
        </div>
    </div>
</template>

<script>
import {createTag} from '@/utils/tagCreate'
import GatewayRedisCacheSearch from "@/components/apiCache/GatewayRedisCacheSearch";
import {apiRouteRedisCacheInfo, apiRouteRefreshCacheInfo} from "@/request/api";
import {ElNotification} from "element-plus";
import {applicationNacosInfoQuery} from "@/request/service";
import {refreshConfigInfo} from "@/request/configCenter";

export default {
    name: "apiCacheManage",
    data() {
        return {
            isLoading: false
        }
    },
    mounted() {
        createTag(this.$route, this.$store)
    },
    methods: {
        refreshCache() {
            this.isLoading = true;
            // 查询当前选中的微服务的实例个数
            applicationNacosInfoQuery({applicationName: 'YWU-GATEWAY'}).then(res => {
                if (res.code === '200') {
                    let serviceInstance = res.data
                    for (let i = 0; i < serviceInstance.length; i++) {
                        apiRouteRefreshCacheInfo().then(res => {
                            if (res.code !== '200') {
                                ElNotification({
                                    title: 'Error',
                                    message: res.message,
                                    type: 'error'
                                })
                            }
                        })
                    }
                    ElNotification({
                        title: 'Success',
                        message: res.message,
                        type: 'success'
                    })
                }
            })
            this.isLoading = false;
        }
    },
    components: {
        GatewayRedisCacheSearch
    },
    computed: {
        apiCacheDataList() {
            return this.$store.state.apiCacheDataList;
        },
        apiCacheSearchData() {
            return this.$store.state.apiCacheSearchData;
        }
    },
    created() {
        apiRouteRedisCacheInfo(this.apiCacheSearchData).then(res => {
            if (res.code === '200') {
                this.$store.commit('changeApiCacheDataList', res.data);
            }
        })
    }
}
</script>

<style scoped lang="less">
    .apiCacheContainer {
        width: 98%;
        height: 100%;
        margin: 0.2%;
        .searchContainer {
            width: 100%;
            margin-top: 1%;
        }
        .tableContainer {
            margin-left: 1%;
            height: 70vh;
        }
        .insertContainer {
            margin-left: 1%;
            margin-top: 0.7%;
        }
    }

</style>